<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>Navigator | Onsen UI</title>
  <link rel="stylesheet" href="../styles/app.css"/>
  <link rel="stylesheet" href="../../node_modules/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="../../node_modules/onsenui/css/onsen-css-components.css">

  <script src="../../node_modules/onsenui/js/onsenui.js"></script>
  <script src="../../node_modules/angular/angular.js"></script>
  <script src="../../dist/angularjs-onsenui.js"></script>

  <script src="../app.js"></script>

</head>

<body>

  <ons-tabbar>
    <ons-tab
      icon="home"
      label="Page1"
      active="true"
      page="page1.html"
      persistent
    ></ons-tab>

    <ons-tab
      icon="gear"
      label="Page2"
      page="page2.html"
    ></ons-tab>

    <ons-tab
      icon="star"
      label="Page3"
      page="page3.html"
    ></ons-tab>
  </ons-tabbar>

  <script type="text/ons-template" id="page1.html">
    <ons-navigator var="myNavigator">
      <ons-page>
        <ons-toolbar>
          <div class="center">Page 1</div>
        </ons-toolbar>

        <div style="text-align: center">
          <h1>Page 1</h1>
          <ons-button ng-click="myNavigator.pushPage('new_page.html', { title: 'New Page' })">Push New Page</ons-button>
          </div>
      </ons-page>
    </ons-navigator>
  </script>

</body>
</html>
